Dotplot Chart
According to William S. Cleveland dotplots are an alternative to the bar chart, in which dots are used to depict the quantitative values (e.g. counts) associated with categorical variables.
Example Color Themes
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = {
"x" : {
"dose" : ["0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","1","1","1","1","1","1","1","1","1","1","2","2","2","2","2","2","2","2","2","2","0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","0.5","1","1","1","1","1","1","1","1","1","1","2","2","2","2","2","2","2","2","2","2"],
"order" : [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10],
"supp" : ["VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","VC","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ","OJ"]
},
"y" : {
"data" : [
[4.2,11.5,7.3,5.8,6.4,10,11.2,11.2,5.2,7,16.5,16.5,15.2,17.3,22.5,17.3,13.6,14.5,18.8,15.5,23.6,18.5,33.9,25.5,26.4,32.5,26.7,21.5,23.3,29.5,15.2,21.5,17.6,9.7,14.5,10,8.2,9.4,16.5,9.7,19.7,23.3,23.6,26.4,20,25.2,25.8,21.2,14.5,27.3,25.5,26.4,22.4,24.5,24.8,30.9,26.4,27.3,29.4,23]
],
"smps" : ["Var1","Var2","Var3","Var4","Var5","Var6","Var7","Var8","Var9","Var10","Var11","Var12","Var13","Var14","Var15","Var16","Var17","Var18","Var19","Var20","Var21","Var22","Var23","Var24","Var25","Var26","Var27","Var28","Var29","Var30","Var31","Var32","Var33","Var34","Var35","Var36","Var37","Var38","Var39","Var40","Var41","Var42","Var43","Var44","Var45","Var46","Var47","Var48","Var49","Var50","Var51","Var52","Var53","Var54","Var55","Var56","Var57","Var58","Var59","Var60"],
"vars" : ["len"]
}
}
<-- Create the configuration for the graph -->
var config = {
"axisAlgorithm":"rPretty",
"axisTickScaleFontFactor":1.8,
"axisTitleFontStyle":"bold",
"axisTitleScaleFontFactor":1.8,
"binned":"true",
"errorBarsColor":"red",
"errorBarsType":"standardDeviation",
"graphOrientation":"vertical",
"graphType":"Dotplot",
"groupingFactors":[
"dose"
],
"jitter":"false",
"showLegend":"false",
"smpLabelRotate":"90",
"smpLabelScaleFontFactor":1.8,
"smpTitle":"dose",
"smpTitleFontStyle":"bold",
"smpTitleScaleFontFactor":1.8,
"theme":"CanvasXpress",
"title":"The Effect of Vitamin C on Tooth Growth in Guinea Pigs",
"xAxis2Show":"false",
"xAxisTicksMinorShow":"false",
"xAxisTitle":"len"
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-toothgrowth-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/cX-toothgrowth-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
axisAlgorithm="rPretty",
axisTickScaleFontFactor=1.8,
axisTitleFontStyle="bold",
axisTitleScaleFontFactor=1.8,
binned=TRUE,
errorBarsColor="red",
errorBarsType="standardDeviation",
graphOrientation="vertical",
graphType="Dotplot",
groupingFactors=list("dose"),
jitter=FALSE,
showLegend=FALSE,
smpLabelRotate=90,
smpLabelScaleFontFactor=1.8,
smpTitle="dose",
smpTitleFontStyle="bold",
smpTitleScaleFontFactor=1.8,
theme="CanvasXpress",
title="The Effect of Vitamin C on Tooth Growth in Guinea Pigs",
xAxis2Show=FALSE,
xAxisTicksMinorShow=FALSE,
xAxisTitle="len"
)
Create New Page